body{min-width: 1200px;max-width: 1920px;font-size: 16px;margin: 0 auto;}
li{list-style: none;}
.fl{float: left;}
.fr{float: right;}
.content{width: 1200px;margin: 0 auto;}
.icon{display: block;background-image: url(../images/lanhou.png);}

/*固定头部导航栏*/
header.fixed{position: fixed;top: 0;left: 0;right: 0;height: 80px;background:rgba(66,66,66,0.5);z-index: 999;}
header.fixed .content{margin: 0 auto;color: #fff;display: flex;}
header.fixed .left{margin-top: 12px;text-align: center;}
header.fixed .left p{margin-left: 12px;margin-top: 10px;}
header.fixed nav{flex: 1;margin-left: 4.7%;}
header.fixed nav ul{display: flex;}
header.fixed nav li{flex: 1;line-height: 78px;text-align: center;position: relative;}
header.fixed nav a{font-size: 1.125em;color: #fff;}
/*hover颜色设置*/
header.fixed nav a:hover{color: #3eb6f1;}
header.fixed li span{display: block;position: absolute;width: 50%;height: 4px;background-color: skyblue;bottom: 10px;left: 50%;transform: translateX(-50%);}

/*页面整体设置*/
#pages{touch-action: pan-x;}
#pages { position: relative; width: 100%; height: 100%; text-align: center; overflow: hidden; }
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*第一屏*/
#pages .page1 .slider{position: relative;z-index: 1;overflow: hidden;width: 100%;height: 100%;}
/* #pages .page1 .banner{position: absolute;top: 0;left: 50%;transform: translateX(-50%);} */
 #pages .page1 .banner{height: 100%;}
.page1 .banner li{display: none;height: 100%;position: relative;width: 100%;}
.page1 .banner a{position: absolute;top: 48.7%;right: 14.6%;width: 374px;height: 76px;}
/*.page1 .banner .b1{background: url(../images/banner1.jpg) no-repeat center;-webkit-background-size: cover;
background-size: cover;}*/
/*.page1 .banner .b2{background: url(../images/banner2.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;}*/
/*.page1 .banner .b3{background: url(../images/banner3.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;}*/
/*.page1 .banner .b4{background: url(../images/banner4.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;}*/
#pages .page1 img{display: block;margin: 0 auto;height: auto;width: 100%;}
#pages .page1 .dot{position: absolute;left:50%;bottom: 55px;transform: translateX(-50%);}
.page1 .dot span{width: 22px;height: 22px;border-radius: 11px;background: #fff;display: inline-block;margin-right: 12px;float: left;}
.page1 .dot span:last-child{margin-right:0;}
.page1 .dot span:hover{width: 55px;background: #019ee1;}
.page1 .dot span.on{width: 55px;background: #019ee1;}
#banner .cover{width: 50%;height: 100%;background: rgba(34,34,34,0.8);position: absolute;top: 0;left: 0;}
#banner .b2 img{z-index: 9;position: absolute;top: 0;left: 0;}
#banner .b2 .banner2-p{position: absolute;top: 0;left: 0;width: 100%; height: 100%;/*background: url(../images/banner2-p.png) no-repeat center;-webkit-background-size: cover;background-size: cover;*/}
#banner .b4 .banner4-p{position: absolute;top: 0;left: 0;width: 100%; height: 100%;/*background: url(../images/banner4-p.png) no-repeat center;-webkit-background-size: cover;background-size: cover;*/}
#banner .b4 .banner4-c{position: absolute;top: 0;left: 0;width: 100%;height: 100%;/*background: url(../images/banner4-c.png) no-repeat center;-webkit-background-size: cover;background-size: cover;*/}
#banner .b4 .banner4-k{position: absolute;top: 0;left: 0;width: 100%;height: 100%;/*background: url(../images/banner4-k.png) no-repeat center;-webkit-background-size: cover;background-size: cover;animation-delay:0.75s;*/ }

#pages .page2{background-image: url(../images/page2-bg.jpg);background-position: center;}
.page2 .content{position: relative;height: 100%;}
.page2 .left{position: absolute;top: 50%;left: 9.9%;transform: translateY(-50%);width: 31%;}
.page2 .left img{display: block;width: 100%;}
.page2 .right{position: absolute;top: 50%;right: 11%;transform: translateY(-50%);width: 43%;text-align: left;}
.page2 .right .top{color: #02ADFF;}
.page2 .right h2{font-size: 2em;}
.page2 .right h3{font-size: 1.75em;line-height: 1.6em;}
.page2 .right P{color: #4c4c4c;font-size:1.25em;}
.page2 .main{overflow: hidden;}
.page2 .main li{margin-top: 40px;padding-left: 60px;position: relative;}
.page2 .main .icon{position: absolute;top: 50%;left: 0;transform: translateY(-50%)}
.page2 .main .icon5{width: 40px;height: 40px;background-position: 0 -97px;}
.page2 .main .icon6{width: 40px;height: 40px;background-position: -60px -97px;}
.page2 .main .icon7{width: 40px;height: 40px;background-position: -117px -97px;}
.page2 .main .two{animation-delay: 0.5s;}
.page2 .main .three{animation-delay: 1s;}

#pages .page3{background-image: url(../images/page3-bg.png);}
.page3 .content{height: 100%;position: relative;}
.page3 .top{text-align: center;position: absolute;top: 15%;left: 50%;transform: translateX(-50%);width: 1200px;}
.page3 .top h3{font-size: 2em;}
.page3 .top span{display: block;width: 70px;height: 0;border-width: 0 0 2px 0;border-color: #333;border-style: solid;position: absolute;top: 50%;}
.page3 .top span.left{left:25%;}
.page3 .top span.right{right:25%;}
.page3 .main{background-image:url(../images/page3-bg2.png);background-position:center 80%;height: 593px;background-repeat: no-repeat;position: absolute;top: 25%;width:100%;background-size: contain;}
.page3 .main .cover{position: absolute;}
.page3 .main .cover1{top: 2%;left: 17%;}
.page3 .main .cover2{top: 32%;left: 7%;}
.page3 .main .cover3{top: 63%;left: 6%;}
.page3 .main .cover4{top: 65%;left: 44%;}
.page3 .main .cover5{top: 40%;left: 69%;}
.page3 .main .cover6{top: 8%;left: 88%;}
.page3 .main .cover7{top: 59%;left: 75%;}
.page3 .main img{display: block;width: 100%;}
.page3 .cover>img.origin{transition:all 0.3s;}
.page3 .cover>img.origin:hover{transform: scale(1.1);}
.page3 .cover .con{position: absolute;text-align: left;}
.page3 .cover .con1{top: 8px;left: 129px;}
.page3 .cover .con2{top: 31px;left: 103px;}
.page3 .cover .con3{top: 90px;left: 172px;}
.page3 .cover .con4{top: 85px;left: -67px;text-align: right;}
.page3 .cover .con5{top: 30px;left: -113px;text-align: right;}
.page3 .cover .con6{top: 18px;left: -113px;text-align: right;}
.page3 .cover .con7{bottom: -22px;left: -35px;text-align: right;}
.page3 .cover .con p{font-size: 1em;color: #999;white-space: nowrap;}
.page3 .cover .con .p{font-size: 1.125em;color: #333;}
.page3 .cover .hover{position: absolute;width: 584px !important;display: none;}
.page3 .cover:hover .hover{animation: hover 1s ease-out;display: block;}
.page3 .cover .hover1{top: -8px;left: -13px;}
.page3 .cover .hover2{top: -8px;left: -13px;}
.page3 .cover .hover3{top: -6px;right: -18px;}
.page3 .cover .hover4{top: -6px;right: -18px;}
@keyframes hover {
    0% {width: 0px;height: 0px;opacity: 0;}
    100% {width: 584px;height: 317px;opacity:1;}
}

#pages .page4{background:url(../images/page4-bg.png);background-size: cover;opacity: .6;}
.page4 .main{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 1300px;margin: 0 auto;}
.page4 .main ul{width: 100%;}
.page4 .main li{font-size: 1.75em;color: #fff;text-align:center;margin-right: 38px;float: left;}
.page4 .main li:last-child{margin-right: 0px;}
.page4 .main div{width: 319px;height: 215px;background: #fff; line-height: 215px;;color: #019ee1;font-size: 4.29em;border-radius: 10px;}
.page4 .main div.spc{width: 218px;}
.page4 .main p{margin-top: 65px;}

#pages .page5{text-align: left;}
.page5 .top{margin: 9% auto 0; width: 1300px;}
.page5 h2{font-size: 1.5em;line-height: 1.4em; margin-bottom: 35px;}
.page5 .top h2{margin-bottom: 20px;}
.page5 .top .tright h2{margin-bottom: 70px;}
.page5 .top p{font-size: 1.25em;line-height: 1.6em;}
.page5 .date{font-size: 0.875em;color: #797979;}
.page5 .tright p{font-size: 0.875em;}
.page5 .tright .l{margin-right: 30px;}
.page5 .top .more{margin-top: 40px;}
.page5 .bottom{margin: 40px auto 0; width: 1300px;position: relative;}
.page5 .bottom .title{font-size: 1.25em;margin-bottom: 30px;}
.page5 .bottom h2{margin-bottom: 0px;}
.page5 .bottom li{height:30px;font-size: 1em;line-height: 30px;}
.page5 .bottom .bright{width: 720px;}
.page5 .bottom nav{height: 150px;overflow: hidden;}
.page5 .bottom ul{position: relative;}


.page6 .main{margin-top: 8%;}
.page6 .top{text-align: center;width: 1200px;margin: 0 auto;position: relative;}
.page6 .top h3{font-size: 2em;}
.page6 .top span{display: block;width: 70px;height: 0;border-width: 0 0 2px 0;border-color: #333;border-style: solid;position: absolute;top: 50%;}
.page6 .top span.left{left:25%;}
.page6 .top span.right{right:25%;}
.page6 p.sub-title{font-size: 1.625em;line-height: 2em;}
.page6 .con{margin-top: 40px;}
.page6 #b-goods{width: 1217px;height: 529px;margin: 0 auto;position: relative;}
.page6 #b-goods div{overflow: hidden;}
.page6 #b-goods ul{width: 310%;position: relative;}
.page6 #b-goods li{float: left;width: 393px;height: 529px;box-sizing: border-box;border:2px solid #d2d2d2;margin-right: 19px;position: relative;}
#b-goods .img{width: 315px;height: 315px;border-radius: 50%;margin: 26px auto;overflow: hidden;position: relative;}
#b-goods img{display: block;margin: 0 auto;}
#b-goods .bot{width: 100%;height: 149px;position: absolute;bottom: 0;background: rgba(229,229,229,0.8);}
#b-goods .bot p{font-size: 1.625em;margin-top: 40px;margin-bottom: 10px;}
#b-goods .bot span{font-size: 0.923em;}
#b-goods .bot a{font-size: 1.125em;padding: 10px 18px;border:1px solid #666;color: #83897f;position: absolute;bottom:23px;left: 50%;transform: translateX(-50%);line-height: 1em; /*display: block;margin: 0 auto;*/}
#b-goods .arrow{width: 53px;height: 98px;display: block;position: absolute;top: 50%;transform: translateY(-50%);}
#b-goods .arrow-left{background: url(../images/arrow.png) no-repeat;left: -100px;}
#b-goods .arrow-right{background: url(../images/arrow.png) no-repeat;right: -100px;transform: translateY(-50%) rotate(180deg);}

.page7 .main{margin-top: 6.5%;}
.page7 .top{text-align: center;width: 1200px;margin: 0 auto;position: relative;}
.page7 .top h3{font-size: 2em;}
.page7 .top span{display: block;width: 70px;height: 0;border-width: 0 0 2px 0;border-color: #333;border-style: solid;position: absolute;top: 50%;}
.page7 .top span.left{left:25%;}
.page7 .top span.right{right:25%;}
.page7 p.sub-title{font-size: 1.625em;line-height: 2em;}
.page7 .con{margin-top: 40px;}
.page7 table{margin: 0 auto;}
.page7 table td{width: 182px;height: 182px;border:1px solid #ccc;vertical-align: middle;text-align: center;position: relative;overflow: hidden;}
.page7 table td:hover .cover{display: block;}
.page7 table img{transition: all 0.6s ease;}
.page7 table td img+img{display: none;}
.page7 table .cover{width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;display: none;animation:bounceInUp 1s both;}
.page7 table .cover p{height: 48px;line-height: 48px;font-size: 1.125em;background: #000;background: url(../images/button_img1.png) no-repeat; -webkit-background-size: cover;background-size: cover;position: absolute;bottom: 0;left: 0;right: 0;color: #fff;}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 182px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.srotate{transform: rotateY(90deg);}
.frotate{transform: rotateY(0deg);}

#pages .page8{background:url(../images/page8-bg.jpg);background-size: cover;}
.page8 .main{width: 1300px;margin: 0 auto;margin-top: 15.7%;color: #fff;}
.page8 .main .left li{text-align: left;margin-bottom: 50px;}
.page8 .main a{color: #fff;}
.page8 .top{border-width: 0 0 4px;border-style: solid;border-color: transparent;border-image: url(../images/border-img2.png) 1 4 round;height: 390px;}
.page8 .top .left{height: 100%; padding-top: 35px;padding-right: 10px; border-width: 0 7px 0 0;border-style: solid;border-color: transparent; border-image: url(../images/border-img.png) 0 7 round;box-sizing: border-box;}
.page8 .top a.title{font-size: 1.75em;}
.page8 .top a{font-size: 1.5em;}
.page8 .top nav.l{margin-right: 52px;}
.page8 .top .middle{width: 450px;height: 100%;margin: 0 auto;padding-left: 15px;}
.page8 .top .middle ul{padding-top: 50px;}
.page8 .top .middle li{text-align: center;float: left;margin-right: 20px;}
.page8 .top .middle li:first-child{margin-left: 38px;}
.page8 .middle .box{width: 170px;height: 170px;background: #fff;display: table-cell;vertical-align: middle;position: relative;}
/*.page8 .middle .box:hover .qr-code{display:block;}*/
/*.page8 .middle .box img.qr-code{display: none;position: absolute;top: 0;left: 0;}*/
.page8 .middle .box img:first-child{width: 125px;height: auto;}
.page8 .top .middle p{font-size: 1.375em;margin-top: 50px;}
.page8 .top .right{padding-top: 76px;text-align: right;height: 100%;padding-left: 10px; border-width: 0 0 0 7px;border-style: solid;border-color: transparent; border-image: url(../images/border-img.png) 0 7 round;box-sizing: border-box;}
.page8 .top .right p{font-size: 1.25em;margin-bottom: 45px;}
.page8 .top .right .tel{font-size: 1.5em;}
.page8 .top .right a{font-size: 1.375em;padding: 0 83px 0 20px;border:1px solid #fff;line-height: 50px;float: right;border-radius: 8px;background: url(../images/QQ.png) no-repeat 140px center;}
.page8 .bottom{margin-top: 5%;}
.page8 .bottom a{font-size: 1.375em;margin-right: 43px;}

@media screen and (max-width: 1400px){
    body{font-size:14px;}
    #banner .do img{width: 80%;height: 80%;}
    .page5 .tleft{width: 525px;}
    .page5 .tleft p{float: left;line-height: 2em;}
    .page5 .tleft .date{float: right;}
    .page5 .top{margin: 7% auto 0;}
    .page7 table td{width: 150px;height: 150px;}
    .page8 .main{margin-top: 11.7%;}
    .page6 .main{margin-top: 6%;}
    .page6 .con{margin-top: 20px;}
    .page6 #b-goods{width: 805px;height: 529px;margin: 0 auto;position: relative;}
    .page6 #b-goods ul{width: 500%;position: relative;}
}
